import React, { useEffect, useMemo, useState } from 'react'
import { comRequest } from '../../request'
import { Table, Spin } from 'antd';
import "./index.less";
import { formarPricelColor, fomartListItemlData, formarCCLColor } from './config'
import 'dayjs/locale/zh-cn';
import { BDLinfo } from './BDLinfo'
import { PriceInfo } from './PriceInfo'

export const QQTable = ({ date, code, isSz, type = 'call', searchData }) => {
    console.log("898989", date, code)
    const [isLoading, setIsLoading] = useState(true)
    const [dataList, setDataList] = useState([])

    console.log("dataList", dataList)

    useEffect(() => {

        // initMonthDatas()
        if (date && code) {
            queryOptionsDataAll()
        }

    }, [date, code])
    const queryOptionsDataAll = async () => {
        const detailFiles = ['f44', 'f45', 'f412']
        const field = ['f1', 'f2', 'f3', 'f4', 'f5', 'f12', 'f13', 'f14', 'f108', 'f152', 'f161', 'f249', 'f250', 'f330', 'f334', 'f339', 'f340', 'f341', 'f342', 'f343', 'f344', 'f345', 'f346', 'f347', ...detailFiles].join(',')
        console.log("file", decodeURIComponent(field))
        let cecid = isSz ? `0.${code}` : `1.${code}`
        const urlzz = `https://8.push2.eastmoney.com/api/qt/slist/get?secid=${cecid}&exti=${date}&spt=9&fltt=2&invt=2&np=1&ut=bd1d9ddb04089700cf9c27f6f7426281&fields=${encodeURIComponent(field)}&fid=f161&pn=1&pz=60&po=0&wbp2u=%7C0%7C0%7C0%7Cweb&_=1729929996234`





        try {
            const result = await comRequest({
                url: urlzz,
            })
            const list = result?.data?.data?.diff || []
            console.log("result111", result)
            console.log("list", list)

            let tempList = fomartListItemlData([...list], type)
            const preList = tempList.filter(v => !v.isIncludeAname)
            const moreList = tempList.filter(v => v.isIncludeAname)


            console.log("tempList", tempList)
            setDataList([...preList, ...moreList])
            setIsLoading(false)
        } catch (error) {
            console.log("error", error)

        }

    }






    const sumColumns = [
        {
            title: '合约',
            dataIndex: 'name',
            render: (text, record) => {
                return <a style={{
                    fontSize: '20px',

                }}
                    onClick={() => {

                        window.open(`https://quote.eastmoney.com/qiquan/${record.id}_${isSz ? 'ZO' : 'SO'
                            }.html`)
                    }}
                >
                    {text}
                </a>
            }
        },
        {
            title: '价格信息',
            dataIndex: 'show_less',
            render: (text, record) => {
                return <PriceInfo currentPrice={record?.currentPrice} id={record?.id} isSz={isSz} type={type}
                    cjlNumber={record?.ccl} />
            }
        },
        {
            title: '现价',
            dataIndex: 'currentPrice',
            render: (text, record) => <span

                style={{
                    fontSize: '20px',
                    color: formarPricelColor(text)
                }}>
                {text}元
            </span>

        },

        {
            title: '涨跌',
            dataIndex: 'zdprice',
            render: (text, record) => <span

                style={{
                    fontSize: '20px'
                }}>
                {text}元
            </span>

        },
        {
            title: '涨跌幅',
            dataIndex: 'zdf',
            render: (text, record) => <span

                style={{
                    fontSize: '20px'
                }}>
                {text}%
            </span>
        },
        {
            title: '成交量',
            dataIndex: 'cjl',
            render: (text, record) => <span

                style={{
                    fontSize: '20px'
                }}>
                {text}
            </span>
        },
        {
            title: '持仓量',
            dataIndex: 'ccl',
            render: (text, record) => {
                return <span style={{
                    ...formarCCLColor(record?.ccl)

                }} className='fonsizeClass'>
                    {record?.ccl}
                </span>
            }
        },
        {
            title: '波动率',
            dataIndex: 'show_less',
            render: (text, record) => {
                return <BDLinfo id={record?.id} isSz={isSz} type={type} yhbdl={record?.yhbdl} />
            }
        },


    ];







    const filterDataList = useMemo(() => {
        if (searchData && searchData) {
            try {
                let filTemList = dataList
                if (searchData.ccl) {
                    filTemList = filTemList?.filter(item => item?.ccl >= searchData.ccl)
                }
                if (searchData.currentMinPrice) {
                    filTemList = filTemList?.filter(item => item?.currentPrice >= searchData.currentMinPrice)
                }
                if (searchData.currentMaxPrice) {
                    filTemList = filTemList?.filter(item => item?.currentPrice <= searchData.currentMaxPrice)
                }
                if (searchData.yhbdlNumber) {
                    filTemList = filTemList?.filter(item => item?.yhbdl <= searchData.yhbdlNumber)
                }
                return filTemList
            } catch (err) {
                console.log("iserr", err)
                return dataList
            }
        }
        return dataList
    }, [dataList, searchData])
    return <div className='header-box'>
        <Spin tip="Loading" size="small" spinning={isLoading}>
            <div className='table_container'>

                {<Table dataSource={filterDataList} columns={sumColumns}
                    pagination={false}
                />}
            </div>

        </Spin>
    </div>
}